<%
local dsp = require "luci.dispatcher"
-%>

<style>
/*!
Pure v1.0.1
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;margin-bottom:0.5rem}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}

.cbi-page-actions.control-group{
margin-bottom: 0.5rem;
}
.cbi-page-actions.control-group.fixed {
    bottom: 2.9rem;
}
	.block {
		margin: 0.2rem;
		padding: 0;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		font-family: inherit;
		min-width: inherit;
		overflow-x: auto;
		overflow-y: hidden;
		border: 1px solid rgba(0,0,0,.05);
		border-radius: .375rem;
		box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
	}
	.img-con {
		margin: 0.5rem;

	}
	.green {
		color: #2dce89;
	}
	.red {
		color: #fb6340;
	}
	.yellow {
		color: #fb9a05;
	}
	.block img {
		width: 48px;
		height: auto;
		/* float:right; */
	}
	.pure-u-5-8 {
		display:flex;
		align-items:center;
	}

	.block h4 {
		font-size: .8rem;
		font-weight: 600;
		margin: 0.57rem 0rem 0.57rem 1rem;
		color:#8898aa!important;
		line-height: 1.8em;
		padding:0;
	}
	
	.check {
		cursor: pointer;
	}

	@media screen and (max-width: 1080px) {
	.block h4{
	font-weight:normal;
	}
	#check_port{
	display:none;
	}
		.block {
			margin: 0.2rem;
		}
		.pure-u-1-4 {
			width: 50%;
		}
		.pure-u-1-5 {
			width: 33.3%;
		}
		.block h4 {
			margin: 1rem 0rem 1rem 0.5rem;
		}
	}
	
	@media screen and (max-width: 480px) {
		.img-con {
			margin: 1.5rem 0.5rem;
		}
		.block img {
			width: 36px;
		}
	}

#check_port.pure-u-1-1 .pure-u-8-24{
width:10%;
}
#check_port.pure-u-1-1 .pure-u-16-24{
width:90%;
}

</style>

<fieldset id="_bypass_status_fieldset" class="cbi-section">
	<div class="pure-g status">
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_tcp_node">TCP<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_udp_node">UDP<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_dns">SmartDNS<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_chinadns">ChinaDNS-NG<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_nf"><%:Netflix%><br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_server"><%:Local Servers%><br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<% if nixio.fs.access("/usr/bin/kcptun-client") then %>
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_kcptun">Kcptun<br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>
		<% end %>
		<div class="pure-u-1-5">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_socks5"><%:Socks5 Server%><br /><span class="red"><%:NOT RUNNING%></span></h4>
				</div>
			</div>
		</div>

		<div class="pure-u-1-5 check" onclick="check_connect('baidu', 'www.baidu.com')">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_baidu"><%:Baidu Connection%><br /><span id="_baidu_status" class="red"><%:Touch Check%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-5 check" onclick="check_connect('google', 'https://www.google.com/generate_204')">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" alt=""/>
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 id="status_google"><%:Google Connection%><br /><span id="_google_status" class="red"><%:Touch Check%></span></h4>
				</div>
			</div>
		</div>
		<div class="pure-u-1-5 check" id="check_port" onclick="check_port(this)">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4><%:Node Check%><br /><span id="_check_nodes_status" class="red"><%:Touch Check%></span></h4>
					<button id="clear_check_port_btn" type="button" class="cbi-button cbi-button-remove" style="display:none"><%:Clear%></button>
				</div>
			</div>
		</div>
	  </div>
	<script>
		//<![CDATA[
		var imgs = document.getElementsByTagName('img');
		for (var i = 0 ; i < imgs.length; i++) {
			document.getElementsByTagName('img')[i].setAttribute("oncontextmenu","return false;");
			document.getElementsByTagName('img')[i].setAttribute("ondragstart","return false;");
		}
		XHR.poll(5, '<%=dsp.build_url("admin/services/bypass/status")%>', null,
			function (x, data) {
				var status_dns = document.getElementById('status_dns');
				var status_kcptun = document.getElementById('status_kcptun');
				var status_chinadns = document.getElementById('status_chinadns');
				var status_nf = document.getElementById('status_nf');
				var status_server = document.getElementById('status_server');
				if (data) {
						var status_tcp_node = document.getElementById('status_tcp_node');
						if (status_tcp_node) {
							var text = 'TCP<br />';
								if (data["tcp_node_status"])
									text += '<span class="green"><%:RUNNING%></span>';
								else
									text += '<span class="red"><%:NOT RUNNING%></span>';

							status_tcp_node.innerHTML = text;
						}
						var status_kcptun = document.getElementById('status_kcptun');
						if (status_kcptun) {
							var text = 'Kcptun<br />';
								if (data["kcptun_tcp_node_status"])
									text += '<span class="green"><%:RUNNING%></span>';
								else
									text += '<span class="red"><%:NOT RUNNING%></span>';
							status_kcptun.innerHTML = text;
						}
					
						var status_udp_node = document.getElementById('status_udp_node');
						if (status_udp_node) {
							var text = 'UDP<br />';
								if (data["udp_node_status"])
									text += '<span class="green"><%:RUNNING%></span>';
									else
									text += '<span class="red"><%:NOT RUNNING%></span>';
							status_udp_node.innerHTML = text;
						}
					
					if (data.dns_mode_status) {
						status_dns.innerHTML = 'SmartDNS<br /><span class="green"><%:RUNNING%></span>';
					} else {
						status_dns.innerHTML = 'SmartDNS<br /><span class="red"><%:NOT RUNNING%></span>';
					}
					if (data.chinadns_status) {
						status_chinadns.innerHTML = 'ChinaDNS-NG<br /><span class="green"><%:RUNNING%></span>';
					} else {
						status_chinadns.innerHTML = 'ChinaDNS-NG<br /><span class="red"><%:NOT RUNNING%></span>';
					}
					if (data.nf_node_status) {
						status_nf.innerHTML = '<%:Netflix%><br /><span class="green"><%:RUNNING%></span>';
					} else {
						status_nf.innerHTML = '<%:Netflix%><br /><span class="red"><%:NOT RUNNING%></span>';
					}
					if (data.server_status) {
						status_server.innerHTML = '<%:Local Servers%><br /><span class="green"><%:RUNNING%></span>';
					} else {
						status_server.innerHTML = '<%:Local Servers%><br /><span class="red"><%:NOT RUNNING%></span>';
					}
					if (data.socks5_status) {
						status_socks5.innerHTML = '<%:Socks5 Server%><br /><span class="green"><%:RUNNING%></span>';
					} else {
						status_socks5.innerHTML = '<%:Socks5 Server%><br /><span class="red"><%:NOT RUNNING%></span>';
					}
				}
			});
			
		function check_connect(type, url) {
			var s = document.getElementById('_' + type + '_status');
			if (s) {
				var div = s.parentNode.parentNode.parentNode.parentNode;
				div.removeAttribute('onclick');
				s.innerHTML = '<%:Check...%>';
				var sendDate = (new Date()).getTime();
				XHR.get('<%=dsp.build_url("admin/services/bypass/connect_status")%>', {
						type: type,
						url : url
					},
					function(x, rv) {
						if (rv.ping_type && rv.ping_type == "curl") {
							var use_time = rv.use_time;
							if (use_time < 1000) {
								s.className="green";
							} else if (use_time < 2000) {
								s.className="yellow";
							} else {
								s.className="red";
							}
							s.innerHTML = use_time + " ms";
						} else if (rv.status) {
							s.className="green";
							s.innerHTML = "<%:Working...%>";
						}
						else {
							s.className="red";
							s.innerHTML = '<%:Problem detected!%>';
						}
					div.setAttribute('onclick','check_connect("' + type + '","' + url + '")');
					}
				);
			}
			return false;
		}

		function check_port(dom) {
			var s = document.getElementById('_check_nodes_status');
			var p = document.getElementById('check_port');
			if (s) {
				dom.removeAttribute('onclick');
				s.innerHTML = '<%:Check...%>';
				XHR.get('<%=dsp.build_url("admin/services/bypass/check_port")%>', null,
					function(x, rv) {
						if (rv.ret) {
							p.classList.add("pure-u-1-1");
							s.innerHTML = rv.ret;
							var clear_btn = document.getElementById('clear_check_port_btn');
							clear_btn.style.display = "inline-block";
							clear_btn.onclick = function(event) {
								clear_check_port(clear_btn);
								if(event.stopPropagation)
									event.stopPropagation();
								else
									event.cancelBubble = true;
							}
						}
						dom.setAttribute('onclick','check_port(this)');
					}
				);
			}
			return false;
		}

		function clear_check_port(btn) {
			btn.style.display = 'none';
			var s = document.getElementById('_check_nodes_status');
			var p = document.getElementById('check_port')
			p.classList.remove("pure-u-1-1");
			s.innerHTML = "<%:Touch Check%>";
			return false;
		}
setTimeout(function(){
check_connect('baidu', 'www.baidu.com')
check_connect('google', 'https://www.google.com/generate_204')
}, 500);

//]]>
	</script>
</fieldset>
